<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img src="https://qcloud.dpfile.com/pc/R8HgTsOfGDEysh7eaNI2z6aPbhnW3iaVRBbNbejMiKudxBVf06W34QcwP5N5Ww6B.jpg" alt="">
    </Category>
    <Category title="游戏" :listData="games">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>
    <Category title="电影" :listData="films">
      <img src="https://img2.baidu.com/it/u=989013748,2891148432&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=716"></img>
      <!-- <video controls src="https://img2.baidu.com/it/u=989013748,2891148432&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=716"></video> -->
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
    name:'App',
    components:{Category},
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
      }
    }
}
</script>
<style scoped>
.container{
  display: flex;
  /* 主轴对齐方式 */
  justify-content: space-around; 
}
img{
    width: 100%;
    height: 100%;
}
</style>
